<template>
  <div class="container">
    <div class="app-container">
      <el-button type="primary" @click="dialogVisible = true">添加权限</el-button>
      <!-- 表格 -->
      <el-table
        :data="permissionList"
        style="width: 100%"
        row-key="id"
        border
        lazy
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
      >
        <template #empty>
          <el-empty description="没有数据" />
        </template>
        <el-table-column
          prop="name"
          label="名称"
          width="180"
        />
        <el-table-column
          prop="code"
          label="标识"
          width="180"
        />
        <el-table-column
          prop="description"
          label="描述"
        />
        <el-table-column label="操作">
          <template #default="scope">
            <el-button type="text">添加</el-button>
            <el-button type="text" @click="showedit(scope.row)">编辑</el-button>
            <el-button type="text" @click="del(scope.row.id)"> 删除</el-button>
            &nbsp;
            <!-- &nbsp; -->
            <!-- 删除 -->
            <!-- <el-popconfirm
              title="确定删除吗？"
              @onConfirm="del(scope.row.id)"
            >

              <template #reference>
                <el-button type="text">删除</el-button>
              </template>
            </el-popconfirm> -->
          </template>
        </el-table-column>
      </el-table>
      <!-- 新增/编辑对话框 -->
      <el-dialog
        :title="isEdit===false?'新增权限':'编辑权限'"
        :visible="dialogVisible"
        width="50%"
      >
        <!-- 表格 -->
        <el-form label-width="80px">
          <el-form-item label="权限名称">
            <el-input v-model="permissioform.name" />
          </el-form-item>
          <!--  -->
          <el-form-item label="权限标识">
            <el-input v-model="permissioform.code" />
          </el-form-item>
          <!--  -->
          <el-form-item label="权限描述">
            <el-input v-model="permissioform.description" />
          </el-form-item>
          <!--  -->
          <el-form-item label="开启">
            <el-switch
              v-model="permissioform.enVisible"
              active-color="#409eff"
              inactive-color="#dcdfe6"
              :active-value="1"
              :inactive-value="0"
            />
            <!-- 0开启  1关闭 -->
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="fn">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import { getpermission, delpeimission, addpermission, editpermission } from '@/api/permission'
import { transListToTree } from '@/utils'
export default {
  name: 'Permission',
  data() {
    return {
      dialogVisible: false,
      isEdit: false,
      permissionList: [],
      permissioform: {
        name: '',
        code: '',
        description: '',
        enVisible: '1',
        pid: 0,
        type: 1
      }
    }
  },
  async created() {
    await this.getpermission()
  },
  methods: {
    async getpermission() {
      const res = await getpermission()
      // console.log(res)
      this.permissionList = transListToTree(res, 0)
      console.log(this.permissionList)
    },
    async del(id) {
      console.log('删除')
      await delpeimission(id)
      this.$message.success('删除成功')
      await this.getpermission()
    },
    async showedit(row) {
      this.isEdit = true
      console.log(row)
      this.permissioform = { ...row }

      this.dialogVisible = true
    },
    // 添加或者编辑权限
    async fn() {
      if (this.isEdit) {
      // 编辑
        await editpermission(this.permissioform)
        this.$message.success('编辑成功')
        await this.getpermission()
        this.dialogVisible = false
        this.isEdit = false
      } else {
      // 添加
        await addpermission(this.permissioform)
        this.$message.success('添加成功')
        this.getpermission()
        this.dialogVisible = false
      }
    }
  }
}
</script>
